{include file="public/header" /}
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu-item,.el-submenu__title{color:#eee;}
  .nav-top{width:100%;height:60px;background:#409EFF;}
  .nav-list > li{float:left;heigh:60px;line-height:60px;color:#fff;}
  .menu-btn{width:60px;text-align:center;}
  .menu-btn i{font-size:25px;}
  .body-content{position:fixed;width:100%;height:calc(100% - 60px)}
  .body-left{overflow:hidden;height:100%;float:left}
  .body-right{float:left;height:100%;overflow-y:auto;overflow-x:hidden;}
  iframe{width:100%;height:100%;border:none}
</style>
</head>
<body>
<div id="box" v-cloak>
	<div class="nav-top">
		<ul class="nav-list">
			<li class="menu-btn" @click="setMenuLeft()"><i class="el-icon-menu"></i></li>
		</ul>
	</div>
	<div class="body-content">
		<div class="body-left">
			<el-menu default-active="1-4-1" style="height:100%;" class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#545c64">
				<el-submenu index="1">
				    <template slot="title">
				      	<i class="el-icon-star-off"></i>
				      	<span slot="title">首页管理</span>
				    </template>
				    <el-menu-item index="1-1" @click="jumurl('{:url('Carousel/index')}')">轮播图管理</el-menu-item>
			      	<el-menu-item index="1-2">导航管理</el-menu-item>
			  	</el-submenu>
			  	<el-submenu index="2">
				    <template slot="title">
				      	<i class="el-icon-document"></i>
				      	<span slot="title">文章管理</span>
				    </template>
				    <el-menu-item index="2-1" @click="jumurl('{:url('Article/index')}')">文章列表</el-menu-item>
			      	<el-menu-item index="2-2">站长推荐</el-menu-item>
			  	</el-submenu>
			  	<el-submenu index="3">
				    <template slot="title">
				      	<i class="el-icon-location"></i>
				      	<span slot="title">标签管理</span>
				    </template>
				    <el-menu-item index="3-1" @click="jumurl('{:url('Badge/index')}')">标签列表</el-menu-item>
			  	</el-submenu>
			  	<el-submenu index="4">
				    <template slot="title">
				    	<i class="el-icon-news"></i>
				      	<span slot="title">博主管理</span>
				    </template>
				    <el-menu-item index="4-1" @click="jumurl('{:url('Blog/index')}')">博主信息</el-menu-item>
			  	</el-submenu>
			  	<el-submenu index="5">
				    <template slot="title">
				      	<i class="el-icon-message"></i>
				      	<span slot="title">留言管理</span>
				    </template>
				    <el-menu-item index="5-1">留言列表</el-menu-item>
			  	</el-submenu>
			</el-menu>
		</div>
		<div class="body-right" :style="right_width">
			<iframe :src="html_src"></iframe>
		</div>
		
	</div>
</div>
<script>
new Vue({
	el : '#box',
	data:{
		isCollapse: true,
		right_width : 'width:calc(100% - 65px)',
		html_src : '{:url("home")}',
	},
	mounted:function(){},
	methods:{
		//跳转页面
		jumurl:function(url){
			this.html_src = url;
		},
		setMenuLeft:function(){
			if(this.isCollapse) {
				this.isCollapse = false;
				this.right_width = 'width:calc(100% - 201px)';
			}else{
				this.isCollapse = true;
				this.right_width = 'width:calc(100% - 65px)';
			}
		}
	}
});
</script>
</body>
</html>